<template>
  <div class="picture-upload">  
  <a-upload  
    list-type="picture-card"  
    :show-upload-list="false"  
    :custom-request="handleUpload"  
    :before-upload="beforeUpload"  
  >  
    <img v-if="picture?.url" :src="picture?.url" alt="avatar" />  
    <div v-else>  
      <loading-outlined v-if="loading"></loading-outlined>  
      <plus-outlined v-else></plus-outlined>  
      <div class="ant-upload-text">点击或拖拽上传图片</div>  
    </div>  
  </a-upload>
  

  <!-- <div>{{picture.url}}</div>   -->
</div>
</template>

<script setup lang="ts">

import { message } from 'ant-design-vue'
import {uploadPictureUsingPost} from '../api/pictureController'
import {ref} from 'vue'

 
 
interface Props {
  picture?: API.PictureVO
  spaceId?: number
  onSuccess?: (newPicture: API.PictureVO) => void
}



  
const props = defineProps<Props>()
const loading = ref<boolean>(false) 


/**
 * 上传后端之前处理函数
 */
const beforeUpload = (file: UploadProps['fileList'][number]) => {  
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'  
  if (!isJpgOrPng) {  
    message.error('不支持上传该格式的图片，推荐 jpg 或 png')  
  }  
  const isLt2M = file.size / 1024 / 1024 < 3  
  if (!isLt2M) {  
    message.error('不能上传超过 3M 的图片')  
  }  
  return isJpgOrPng && isLt2M  
}

/**  
 * 上传处理函数  
 * @param file  
 */  
const handleUpload = async ({ file }: any) => {  
  loading.value = true  
  try {  
        // 上传时传递 spaceId
      const params: API.PictureUploadRequest = props.picture ? { id: props.picture.id } : {}
      params.spaceId = props.spaceId;
      const res = await uploadPictureUsingPost(params, {}, file) 
    if (res.data.code === 0 && res.data.data) {  
      message.success('图片上传成功')  
      // 将上传成功的图片信息传递给父组件  
      props.onSuccess?.(res.data.data)  
    } else {  
      message.error('图片上传失败了哈！，' + res.data.message)  
    }  
  } catch (error) {  
    message.error('图片上传失败')  
  } finally {  
    loading.value = false  
  }  
}




</script>

<style scoped>

.picture-upload :deep(.ant-upload) {  
  width: 100% !important;  
  height: 100% !important;  
  min-height: 152px;  
  min-width: 152px;  
}  
  
.picture-upload img {  
  max-width: 100%;  
  max-height: 480px;  
}  
  
.ant-upload-select-picture-card i {  
  font-size: 32px;  
  color: #999;  
}  
  
.ant-upload-select-picture-card .ant-upload-text {  
  margin-top: 8px;  
  color: #666;  
}

</style>